<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>超市账单管理系统</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--头部-->
			<header class="publicHeader">
				<h1>超市账单管理系统</h1>

				<div class="publicHeaderR">
					<p><span>下午好！</span><span style="color: #fff21b"> {{loginUser.name}}</span> , 欢迎你！</p>
					<a href="javascript:void(0)" @click="logout()">退出</a>
				</div>
			</header>
			<!--时间-->
			<section class="publicTime">
				<span id="time">2015年1月1日 11:11 星期一</span>
				<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
			</section>
			<!--主体内容-->
			<section class="publicMian">
				<div class="left">
					<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
					<nav>
						<ul class="list">
							<li><a href="billList.html">账单管理</a></li>
							<li><a href="providerList.html">供应商管理</a></li>
							<li><a href="userList.html">用户管理</a></li>
							<li><a href="password.html">密码修改</a></li>
							<li><a href="javascript:void(0)" @click="logout()">退出系统</a></li>
						</ul>
					</nav>
				</div>
				<div class="right">
					<div class="location">
						<strong>你现在所在的位置是:</strong>
						<span>密码修改页面</span>
					</div>
					<div class="providerAdd">
						
							<!--div的class 为error是验证错误，ok是验证成功-->
							<div class="">
								<label for="oldPassword">旧密码：</label>
								<input type="password" v-model="changes.old" name="oldPassword" id="oldPassword" required />
								<span>*请输入原密码</span>
							</div>
							<div>
								<label for="newPassword">新密码：</label>
								<input type="password" v-model="changes.temp" name="newPassword" id="newPassword" required />
								<span>*请输入新密码</span>
							</div>
							<div>
								<label for="reNewPassword">确认新密码：</label>
								<input type="password" v-model="changes.now" name="reNewPassword" id="reNewPassword" required />
								<span>*请输入新确认密码，保证和新密码一致</span>
							</div>
							<div class="providerAddBtn">
								<!--<a href="#">保存</a>-->
								<input type="button" value="保存" @click="changePwd()" />
							</div>
						
					</div>
				</div>
			</section>
			<footer class="footer">
			</footer>
			
			<script>
				
				var vue = new Vue({
					el:"#app",
					data:{
						loginUser:{},
						//修改密码的信息
						changes:{}
					},
					methods:{
						logout:function(){
							//1.提示确认框
							//2.确认 清空session中数据
							//3.跳转到登录页面
							if(confirm("确定要退出登录?")){
								sessionStorage.clear();
								location.href = "login.html";
							}
						},
						changePwd:function(){
							//修改密码方法!
							//1.对比密码
							if(this.changes.temp == this.changes.now){
								//两次密码一致
								//2.后台修改密码
								var path = "http://localhost:8080/sms/user/change";
								
								this.$http.post(path,this.changes).then(function(data){
									var code = data.body.code;
									var msg =  data.body.msg;
									
									if(code == 0){
										alert(msg);
									}else{
										//修改成功!
										sessionStorage.clear();
										location.href = "login.html";
									}
								});
								
								//3.清空数据跳转页面
								
							}else{
								alert("两次新密码输入不一致!");
							}
							
						}
					},
					mounted:function(){
						//vue初始化完毕会主动触发
						var userStr = sessionStorage.getItem("user");
						var userObj = JSON.parse(userStr);
						
						this.loginUser = userObj;
						
						//将登陆的用户账号赋值给change.account
						this.changes.account = userObj.account;
					}
				});
				
			</script>
		</div>
	</body>
</html>
